{% extends "base.html" %}

{% block extra_css %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.10.2/viewer.min.css">
<style>
.preview-image {
    max-width: 150px;
    cursor: pointer;
}
.file-card {
    height: 100%;
}
</style>
{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-12">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2>查看合同</h2>
            <div>
                <a href="{{ url_for('index') }}" class="btn btn-secondary">
                    <i class="fas fa-arrow-left"></i> 返回列表
                </a>
            </div>
        </div>

        <div class="card mb-4">
            <div class="card-header">
                <h5 class="card-title mb-0">合同信息</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <p><strong>合同编号：</strong> {{ contract.unique_id }}</p>
                        <p><strong>项目名称：</strong> {{ contract.pro_name }}</p>
                        <p><strong>我方公司：</strong> {{ contract.my_comma }}</p>
                        <p><strong>供应商：</strong> {{ contract.ven_name }}</p>
                        <p><strong>供应物品：</strong> {{ contract.item_sup }}</p>
                    </div>
                    <div class="col-md-6">
                        <p><strong>负责人：</strong> {{ contract.people }}</p>
                        <p><strong>金额：</strong> {{ "%.2f"|format(contract.money) }}</p>
                        <p><strong>日期：</strong> {{ contract.date }}</p>
                        <p><strong>类别：</strong> {{ contract.cate }}</p>
                        <p><strong>状态：</strong>
                            {% if contract.status == '待审批' %}
                            <span class="badge bg-warning">待审批</span>
                            {% elif contract.status == '已通过' %}
                            <span class="badge bg-success">已通过</span>
                            {% elif contract.status == '已拒绝' %}
                            <span class="badge bg-danger">已拒绝</span>
                            {% elif contract.status == 'deleted' %}
                            <span class="badge bg-secondary">已删除</span>
                            {% endif %}
                        </p>
                        {% if contract.note %}
                        <p><strong>备注：</strong> {{ contract.note }}</p>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>

        {% if files %}
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="card-title mb-0">合同文件</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    {% for file in files %}
                    <div class="col-md-4 mb-3">
                        <div class="card file-card">
                            <div class="card-body">
                                <h6 class="card-title text-truncate">{{ file }}</h6>
                                {% if file.lower().endswith(('.jpg', '.jpeg', '.png')) %}
                                <img src="{{ url_for('download_file', filename=file) }}" class="preview-image mb-2" alt="{{ file }}">
                                {% endif %}
                                <div class="btn-group">
                                    <a href="{{ url_for('download_file', filename=file) }}" class="btn btn-sm btn-primary" target="_blank">
                                        <i class="fas fa-download"></i> 下载
                                    </a>
                                    {% if file.lower().endswith(('.pdf', '.doc', '.docx')) %}
                                    <button class="btn btn-sm btn-info convert-btn" data-file="{{ file }}">
                                        <i class="fas fa-image"></i> 转为图片
                                    </button>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
        {% endif %}

        {% if images %}
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="card-title mb-0">转换后的图片</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    {% for image in images %}
                    <div class="col-md-3 mb-3">
                        <img src="{{ url_for('download_file', filename='converted_' + contract.unique_id + '/' + image) }}" 
                             class="preview-image img-thumbnail" alt="{{ image }}">
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
        {% endif %}

        {% if current_user.role == 'admin' and contract.status == '待审批' %}
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="card-title mb-0">合同审批</h5>
            </div>
            <div class="card-body">
                <form action="{{ url_for('approve_contract', id=contract.id) }}" method="post">
                    <div class="mb-3">
                        <label for="comment" class="form-label">审批意见</label>
                        <textarea class="form-control" id="comment" name="comment" rows="3"></textarea>
                    </div>
                    <div class="mb-3">
                        <button type="submit" name="status" value="已通过" class="btn btn-success">
                            <i class="fas fa-check-circle"></i> 通过
                        </button>
                        <button type="submit" name="status" value="已拒绝" class="btn btn-danger">
                            <i class="fas fa-times-circle"></i> 拒绝
                        </button>
                    </div>
                </form>
            </div>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.10.2/viewer.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // 初始化图片查看器
    const images = document.querySelectorAll('.preview-image');
    images.forEach(function(image) {
        const viewer = new Viewer(image, {
            inline: false,
            viewed() {
                viewer.zoomTo(1);
            },
        });
    });

    // 文件转换按钮事件
    const convertBtns = document.querySelectorAll('.convert-btn');
    convertBtns.forEach(function(btn) {
        btn.addEventListener('click', function() {
            const file = this.dataset.file;
            this.disabled = true;
            this.innerHTML = '<i class="fas fa-hourglass"></i> 转换中...';
            
            fetch(`/contract/{{ contract.id }}/convert`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ file: file })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    location.reload();
                } else {
                    alert('转换失败：' + data.message);
                    this.disabled = false;
                    this.innerHTML = '<i class="fas fa-image"></i> 转为图片';
                }
            })
            .catch(error => {
                alert('转换失败：' + error);
                this.disabled = false;
                this.innerHTML = '<i class="fas fa-image"></i> 转为图片';
            });
        });
    });
});
</script>
{% endblock %} 